<template>
  <div>
    <Suspense>
      <template #default>
        <div>
          <async-o />
          <async-t />
        </div>
      </template>
      <template #fallback>
        <h1>组件加载中...</h1>
      </template>
    </Suspense>
      <div>
        <Cslot>
          <template #bigTurnip>
            大萝卜
          </template>
          <!-- #smallTurnip 为v-slot:smallTurnip缩写 -->

          <template #smallTurnip="bigTurnipProps" >
             {{bigTurnipProps.message }}
          </template>
          <template #midTurnip>
            中萝卜
          </template>

        </Cslot>

      </div>

  </div>
</template>

<script>
import { onErrorCaptured } from "vue";
import AsyncOne from '../../components/Async1.vue'
import AsyncTwo from '../../components/Async2.vue'
import Cslot from "./Cslot.vue";
export default {
  name: "suspense",
  components:{
    AsyncOne,
    AsyncTwo,
    Cslot,
  },
  setup() {
    onErrorCaptured((error) => {
      console.log(error);
      return true;
    })

    return {};
  }
}
</script>